import Headers from "./todo/Header/Header";
import Doing from "./todo/Doing/Doing";
import Done from "./todo/Done/Done";

import  { useEffect, useState,useCallback} from 'react'
import {v4 as uuidv4} from 'uuid'

function TodoList(props){

 let [todos,setTodos]=useState([])
      useEffect(() => {
        const todos = JSON.parse(localStorage.getItem('todos') || '[]');
        setTodos(todos);
      }, [])
      useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(todos));
      }, [todos])
        const gettervalue=(data)=>{
          setTodos([...todos,{id:uuidv4(),todo:data,done:false}])
        }
        const remove = useCallback((id) => {
          setTodos((todos) => todos.filter(item => item.id !== id));
        }, [])
        // 状态改变
        const completeItem = useCallback((id) => {
          setTodos((todos) => todos.map(item => {
            if (item.id === id) {
              
              item.done = !item.done
            }
            return item;
          }))
        }, [])
        // 事件数量

        let [finished]=useState(0)
       todos.filter((item,index)=>{
          if(item.done==true){
           finished++
          }
        })
        let [unfinished]=useState(0)
       todos.filter((item,index)=>{
          if(item.done==false){
           unfinished++
          }
        })
        
        
  return (
    <div>
   <a onClick={(e)=>{remove(e)}} href="">你好</a>
    <Headers addTodo={gettervalue}></Headers>
    <Doing unfinished={unfinished} completeItem={completeItem} data={remove} todos={todos}></Doing>
    <Done finished={finished} completeItem={completeItem} data={remove} todos={todos}></Done>
    </div>
    
  )
}
export default TodoList;